import React from "react";
import './VoiceAnimation.less'

import voiceImage1 from "../../assets/image/voice/black1.png";
import voiceImage2 from "../../assets/image/voice/black2.png";
import voiceImage3 from "../../assets/image/voice/black3.png";
import voiceImage4 from "../../assets/image/voice/white1.png";
import voiceImage5 from "../../assets/image/voice/white2.png";
import voiceImage6 from "../../assets/image/voice/white3.png";


export type IVoiceAnimationProps = {
  type?: 'black'|'white'
};
export type IVoiceAndmationState = {
  step:number
}
export default class VoiceAnimation extends React.Component<IVoiceAnimationProps, IVoiceAndmationState> {
  state = {
    step:3
  }
  animationId:any
  play(){
    clearInterval(this.animationId)
    this.animationId = setInterval(()=>{
      const step = this.state.step > 2 ? 1 : this.state.step+1
      this.setState({
        step
      })
    },500)
  }
  stop(){
    clearInterval(this.animationId)
    this.setState({
      step:3
    })
  }
  componentDidMount(){
    this.stop()
  }
  render() {
    return <>
      <div className="voice-animate">
        <div className="image-items">
          <div className={`step step-${this.state.step}`}>
          { this.props.type == 'black' ? <><img src={voiceImage1} /><img src={voiceImage2} /><img src={voiceImage3} /></> : <><img src={voiceImage4} /><img src={voiceImage5} /><img src={voiceImage6} /></> }
          </div>  
        </div>
        
      </div>
    </>
  }
}
